<template>
    <div class="content">
        <template v-for="(item,key) in list" v-if="!isDetail">
            <div class="msg-book-tit">
                订阅{{number[key]}}（<span class="blue">{{item.counts}}</span>）

                <div class="pull-right">
                    <van-icon name="delete" class="delete" @click="delBook(item.id)"/>
                    <router-link :to="{name:'userBookEdit',query:{id:item.id}}">
                        <van-icon name="edit"/>
                    </router-link>
                </div>
            </div>
            <div class="page-block">
                <div class="book-list">
                    <ul class="list-body no-mt">
                        <li class="item" v-if="item.car_level">{{item.car_level}}</li>
                        <li class="item" v-if="item.car_address">{{item.car_address==1? "本地牌照":"外地牌照"}}</li>
                        <li class="item" v-if="item.year_old">{{item.year_old}}年</li>
                        <li class="item" v-if="item.go_long">{{item.go_long}}万公里</li>
                        <li class="item" v-if="item.row_amount">{{item.row_amount}}升</li>
                        <li class="item" v-if="item.car_dis">{{item.car_dis}}排放</li>
                        <li class="item" v-if="item.car_case">{{item.car_case==1? "手动挡":"自动挡"}}</li>

                        <li class="item" v-if="item.car_color">{{item.car_color}}</li>
                        <li class="item" v-if="item.seat_numb">{{item.seat_numb}}座</li>
                        <li class="item" v-if="item.oil_type">{{item.oil_type}}</li>
                        <template v-if="item.other">
                            <li class="item" v-for="i in  JSON.parse(item.other)">
                                <template v-for="i2 in labList">
                                    <template v-if="i2.id == i">
                                        {{i2.title}}
                                    </template>
                                </template>

                            </li>
                        </template>

                        <li class="item" v-if="item.car_country">{{item.car_country}}</li>
                    </ul>
                </div>

                <template v-for="(items,index) in item.blist">
                    <div class="media-list">
                        <router-link :to="{name:'buyDetail',query:{id:items.id}}">
                        <van-image class="media-list-logo pull-left" lazy-load fit="cover" :src="img(items.series_thumb?items.series_thumb:items.series.thumb,items.head_img)">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20"/>
                            </template>
                        </van-image>
                        </router-link>

                        <div class="media-list-body pull-left">
                            <router-link :to="{name:'buyDetail',query:{id:items.id}}" class="media-list-text-top">{{items.car_name?items.car_name:items.series.series_name}}</router-link>
                            <div class="media-list-text-tps">{{stampToDate(items.card_time,2)}}/{{items.mileage}}万公里</div>
                            <div class="media-list-text-bottom">{{items.price}}万</div>
                        </div>
                    </div>


                </template>

                <button @click="showDetail(item.id,'订阅'+number[key])" class="msg-book-more">查看更多订阅信息</button>
            </div>

            <div class="btn-box">
                <router-link class="btn-primary" :to="{name:'userBook',query:{type:1}}" v-if="list.length<3">添加订阅</router-link>
            </div>
        </template>

        <bookDetail v-if="isDetail" :title="titles" :pid="pid"></bookDetail>
    </div>
</template>

<script>
    import bookDetail from './msg_user_book_detail'

    export default {
        name: "msg_user_book",
        components: {
            bookDetail,
        },
        data() {
            return {
                list:[],
                number:['一','二','三'],
                labList: [],

                isDetail:false,

                titles:'',
                pid:0,
            }
        },
        computed: {},
        mounted: function () {
            this.init();
            var that=this;
            window.addEventListener("popstate",e=>{
                if(that.isDetail){
                    that.isDetail=false;
                }
            },false);
        },
        beforeDestroy(){
            var that=this;
            window.addEventListener("popstate",e=>{
                if(that.isDetail){
                    that.isDetail=false;
                }
            },false);
        },
        methods: {
            init() {
                let that=this;
                this.$api.car.getLable().then(res => {
                    that.labList = res.data.data;

                    that.$api.member.getBook(1).then(res => {
                        that.list = res.data.data;
                    });
                });
            },

            showDetail(id,title){
                this.pid=id;
                this.titles=title;
                this.isDetail=true;
                window.history.pushState(null,null,'#');
            },
            delBook(id) {
                this.$dialog.confirm({
                    message: "确认删除该订阅?"
                }).then(() => {
                    this.$api.member.delBook({id: id}).then(res => {
                        this.$toast(res.data.msg);
                        window.location.reload();
                    });
                }).catch(() => {
                    // on cancel
                });
                ;
            }
        },

    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/user.scss";
</style>
